<template>
  <div id="promotionAdd" class="promotionAdd same-change-oldstyle">
    <div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>经营设置</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/promotionList' }">促销管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{id>0?"修改促销项目":"添加促销项目"}}</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
		</div>
    <div class="add">
      <form action method="post" class="editform">
        <div class="formitem center w-400">
          <span class="lable">项目名称</span>
          <el-input name="promotion_name" size="medium" v-model="promotion_name"  placeholder="请输入项目名称 (如: 黄金周促销)"  maxlength="20"/>
          <i class="icon">*</i>
        </div>
        <div class="formitem center w-400">
          <span class="lable">金额</span>
          <el-input type="text" name="promotion_money" size="medium" v-model="promotion_money"  placeholder="请输入金额" maxlength="9" />
          <i class="icon">*</i>
        </div>
        <div class="formitem center w-400">
          <span class="lable">状态</span>
          <div class="t-lf">
            <el-switch v-model="status" active-text="启用" :active-value="1" inactive-text="禁用" :inactive-value="2"
              active-color="#2c5586" inactive-color="#cccccc" @change="isUse($event)"></el-switch>
          </div>
        </div>
        <div class="formitem w-400">
          <span class="lable">描述</span>
          <el-input type="textarea"  :rows="4" name="promotion_describe" placeholder="请填写促销项目描述" id v-model="promotion_describe" maxlength="500"></el-input>
          <i class="icon"></i>
        </div>
        <div class="formitem">
          <span class="lable">选择园区</span>
          <el-transfer filterable :filter-method="filterMethod" :titles="['未选择', '已选择']" filter-placeholder="请输入园区名称"
            v-model="chooseValue" :data="villageList"></el-transfer>
        </div>
        <!-- <button type="button" class="subbtn" @click="submitForm()">提交</button> -->
        <el-button size="medium"  class="subbtn" type="primary"  @click="submitForm()">提 交</el-button>
      </form>
    </div>
  </div>
</template>
<script>
  import { regionDataPlus, CodeToText } from "element-china-area-data";
  export default {
    name: "promotionAdd",
    data: function () {
      return {
        loading: false, //加载动画
        loading1: false, //加载动画
        promotion_name: "", // 项目名称
        promotion_money: "", // 金额
        id: "", // 促销项目id
        promotion_describe: "", //项目描述
        status: 1, //项目状态 1正常2禁用
        form_id: 1, //用于防止表单重复提交
        villageList: [], //园区列表
        chooseValue: [] //选择的园区
      };
    },
    // 初始化运行
    created: function () {
      var that = this;
      that.id = this.$route.query.id; // 促销项目id
      if (that.isNumeric(that.id)) {
        that.getPromotion();
      } else {
        that.getVillageList();
      }
    },
    inject: [
		'reload'
		],
		methods: {
			RefreshFun(){
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack(){
				this.$router.back(-1);
			},
      filterMethod(query, item) {
        let address = ~item.address.indexOf(query);
        let area = ~item.area_name.indexOf(query);
        let city = ~item.city_name.indexOf(query);
        let province = ~item.province_name.indexOf(query);
        let village_name = ~item.village_name.indexOf(query);
        return address || area || city || province || village_name;
      },
      //获取园区列表
      getVillageList(village_id) {
        this.$post({
          url: "Partner/WaterCard/getPartnerVillage",
          success: res => {
            if (res.code == 1000) {
              let list = res.data;
              list.forEach((item, index) => {
                list[index].key = item.id;
                list[index].label = `${item.village_name} `;
              });
              this.chooseValue = village_id;
              this.villageList = list;
            }
          }
        });
      },
      isNumeric(v) {
        return v - parseFloat(v) >= 0;
      },
      isUse(v) {
        var that = this;
        that.status = v;
      },
      submitForm() {
        var that = this;
        var promotion_name = that.promotion_name; // 姓名
        var promotion_money = that.promotion_money; // 金额
        var promotion_describe = that.promotion_describe; // 金额
        var status = that.status; // 金额

        if (promotion_name == "") {
          this.$message.error("项目名不能为空");
          return false;
        }
        if (promotion_money == "") {
          this.$message.error("金额不能为空");
          return false;
        }
        let village_id = that.chooseValue;
        if (village_id == undefined) {
          that.$message.error("请选择参与活动的园区");
          return false;
        }
        var form_id = that.form_id; // 金额
        that.form_id = 0;
        that.$post({
          url: "Partner/Promotion/promotionAdd",
          data: {
            promotion_name: promotion_name,
            promotion_money: promotion_money,
            id: that.id,
            promotion_describe: promotion_describe,
            status: status,
            form_id: form_id,
            village_id
          },
          success: data => {
            that.form_id = 1;
            if (data.code == 1000) {
              this.$message.success(that.id > 0 ? "修改成功" : "添加成功");
              setTimeout(() => {
                that.$router.push({ path: "/promotionList" });
              }, 2000);
            } else {
              that.$message.error(data.message);
            }
          }
        });
      },
      getPromotion() {
        var that = this;
        that.$post({
          url: "Partner/Promotion/getPromotion",
          data: { id: that.id },
          success: data => {
            if (data.code == 1000) {
              that.promotion_name = data.data.name;
              that.promotion_money = data.data.money;
              that.promotion_describe = data.data.describe;
              that.status = Number(data.data.status);
              that.getVillageList(data.data.village_id);
            } else {
              this.$message.error(data.message);
            }
          }
        });
      }
    },
    watch: {}
  };
</script>
<style scoped>
  .promotionAdd {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }

  .add {
    padding: 0 40px;
    font-size: 14px;
  }

  .formitem {
    margin: 20px 0;
    display: flex;

  }

  .center{
    align-items: center;
  }

  .formitem .el-input,.formitem .el-textarea {
    flex: 1;
  }

  .w-400 {
    width: 400px;
  }

  .icon {
    width: 10px;
    color:#FF6565;
    margin-left: 10px;
    text-align: center;
  }

  #promotionAdd .formitem input {
    border: 1px solid #cccccc;
    border-radius: 4px;
    height: 38px;
    padding: 0 15px;
  }

  .lable {
    width: 60px;
    font-weight: bold;
    display: inline-block;
    margin-right: 20px;
    text-align: right;
  }

  .subbtn {
    margin-left: 80px;
  }

  .formitem>>>.el-transfer-panel {
    width: 300px !important;
  }
</style>
